import React from 'react';
import { Form, Button, Spin, Layout, Input, Tabs, Checkbox, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { Redirect, useHistory } from 'react-router-dom';
import { useBoolean } from 'ahooks';
import Cookies from 'js-cookie';
import RequestApi from '@/utils/request';
import State from '@/utils/state';
import footer from '@/assets/images/login/footer.png';
import bg from '@/assets/images/login/login_bg.png';
import css from '@/styles/compoment/index.scss';

/**
 * @description 用户登录
 */
export default () => {
	const [loading, { setTrue, setFalse }] = useBoolean(false);
	const history = useHistory();
	const [form] = Form.useForm();
	form.setFieldsValue({
		remember: localStorage.getItem('remember'),
	});

	const handleSubmit = (value) => {
		const { username, password, remember } = value;
		console.log(username, password, remember);
		const body = {
			password,
			username,
		};
		setTrue();
		RequestApi.connection('post', 'user/login', body)
			.then((response) => {
				if (response.status === false) {
					message.error('登录失败, 可能不存在该账号或者密码错误, 请仔细检查');
					setFalse();
				} else {
					const { data } = response;
					const info = data.row;
					// 记住密码功能
					if (remember === true) {
						console.log(remember);
						localStorage.setItem('username', username);
						localStorage.setItem('password', password);
						localStorage.setItem('remember', remember);
					}
					if (username !== localStorage.getItem('username')) {
						localStorage.removeItem('username');
						localStorage.removeItem('password');
						localStorage.removeItem('remember');
					}
					const role = info.roles.split(',');
					console.log(role);
					if (role.includes('管理员')) {
						State.userInfo = { role: 'ADMIN' };
					} else if (role.includes('超级管理员')) {
						State.userInfo = { role: 'SYSTEM_ADMIN' };
					} else {
						State.userInfo = { role: 'USER' };
					}
					Cookies.set('Authorization', '1231231231');
					Cookies.set('id', info.id);
					Cookies.set('username', info.username);
					Cookies.set('distinctId', info.distinctId);
					Cookies.set('OrgId', info.orgId);
					Cookies.set('manageOrgId', info.orgId);
					setFalse();
					message.success('登录成功');
					setTimeout(() => {
						history.push('/');
					}, 500);
				}
			})
			.catch(() => {
				message.error('登录失败');
				setFalse();
			});
	};
	const register = () => {
		history.push('/register');
	};
	if (State.isLogin) return <Redirect to={{ pathname: '/' }} />;

	const { TabPane } = Tabs;
	return (
		<Layout className={css.login_layout}>
			<img src={bg} alt="" className={css.bg} />
			<Layout>
				<Layout.Content className={css.login_main}>
					<div className={css.login_title}>重庆市停车管理系统</div>
					<div className={css.login_content}>
						<></>
					</div>
					<Tabs defaultActiveKey="1" centered className={css.form_content}>
						<TabPane tab="账密登录" key="1">
							<Form onFinish={handleSubmit} form={form}>
								<Spin spinning={loading} tip="登录中...">
									<Form.Item name="username" initialValue={localStorage.getItem('username')}>
										<Input placeholder="用户名" prefix={<UserOutlined className="site-form-item-icon" />} />
									</Form.Item>
									<Form.Item name="password" initialValue={localStorage.getItem('password')}>
										<Input.Password placeholder="密码" prefix={<LockOutlined className="site-form-item-icon" />} />
									</Form.Item>
									<Form.Item>
										<Button type="primary" htmlType="submit" className={css.login_form_button}>
											登录
										</Button>
									</Form.Item>
								</Spin>
								<Form.Item name="remember" valuePropName="checked" noStyle>
									<Checkbox checked="true">记住密码</Checkbox>
								</Form.Item>
								<Form.Item style={{ display: 'block', textAlign: 'center' }}>
									<Button type="link" block onClick={register}>
										<span style={{ color: 'black' }}>还没有账号? </span>
										<span>去注册</span>
									</Button>
								</Form.Item>
							</Form>
						</TabPane>
						<TabPane tab="短信登录" key="2">
							<h2>暂无</h2>
						</TabPane>
					</Tabs>
				</Layout.Content>
			</Layout>
			<Layout.Footer className={css.login_footer}>
				<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=50019002502240_blank">
					<img src={footer} alt="" />
					<p>渝公网安备 50019002502240号</p>
				</a>
			</Layout.Footer>
		</Layout>
	);
};
